<template>
  <div class='container'>
     <el-card class="box-card">
      <el-form ref="form" :model="query" label-width="80px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="关键字" >
              <el-input v-model="query.keyword"> </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="18" align="right">
            <el-button size="small" @click="clear">清除</el-button>
            <el-button size="small" type="primary" @click="onSearch()">搜索</el-button>
          </el-col>
        </el-row>
      </el-form>

      <!-- 顶部搜索表单 end -->
      <el-alert :title="'数据一共' + counts + '条'" type="info" show-icon :closable="false"> </el-alert>
      <!-- 底部数据 -->
      <template>
        <el-table :data="questionList" style="width: 100%">
          <el-table-column prop="id" label="编号" width="200"> </el-table-column>
          <el-table-column label="题型">
            <template slot-scope="scope">
              <div>
                <span v-if="scope.row.questionType === '1'">单选</span>
                <span v-else-if="scope.row.questionType === '2'">多选</span>
                <span v-else>简答</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column  label="题目编号" width="200">
            <template slot-scope="scope">
              <div v-for="(item, index) in scope.row.questionIDs" :key="index">
                <p class="number" @click="preview(item.id)">{{ item.number }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="录入时间">
            <template slot-scope="scope">
              {{ scope.row.addTime }}
            </template>
          </el-table-column>
          <el-table-column prop="totalSeconds" label="答题时间">

          </el-table-column>
          <el-table-column prop="accuracyRate" label="正确率" > </el-table-column>
          <el-table-column prop="userName" label="录入人"> </el-table-column>
          <el-table-column label="操作" width="180">
            <template slot-scope="scope">
                <el-button  plain size="small" type="danger" icon="el-icon-delete" circle
                @click="removeQuestion(scope.row)"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    <!-- ================================================================================================= -->

<!-- 分页功能 -->
      <el-pagination
        style="text-align: right; margin-top: 20px; margin-bottom: 15px;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.page"
        :page-sizes="[5, 10, 20 ,50]"
        :page-size="query.pagesize"
        layout="prev, pager, next, sizes, jumper, total"
        background
        :total="counts"
        >
      </el-pagination>

    </el-card>
    <questions-preview :dialogVisible="dialogVisible" @close="dialogVisible = false" :questionItem="questionItem"></questions-preview>
  </div>
</template>

<script>
import questionsPreview from '../components/questions-preview'
import * as Question from '@/api/hmmm/questions'
export default {
  components: {
    questionsPreview
  },
  created () {
    this.getQuestionList() // 内容列表
  },
  data () {
    return {
      counts: 0,
      // 列表数据
      questionList: null,
      questionItem: {},
      // 列表详情开关
      dialogVisible: false,
      query: {
        page: 1, // 1当前页数
        pagesize: 10, // 页尺寸
        keyword: null // 关键字
      }
    }
  },
  methods: {
    // 预览
    async preview (id) {
      // 显示对话框
      try {
        const { data: res } = await Question.detail({ id })
        // console.log(res)
        this.questionItem = res
        this.dialogVisible = true
      } catch (err) {
      }
    },
    async getQuestionList () {
      try {
        const { data: res } = await Question.randoms(this.query)
        // console.log(res)
        this.counts = res.counts
        this.questionList = res.items
      } catch (err) {
      }
    },
    // 清除
    clear () {
      this.query.keyword = ''
      this.query.page = 1
      this.getQuestionList()
    },
    // 搜索
    onSearch () {
      this.query.page = 1
      this.getQuestionList()
    },
    // 移除题库
    async removeQuestion (item) {
      // 提示框
      const result = await this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      // 如果确认删除执行删除逻辑
      if (result === 'confirm') {
        const data = await Question.removeRandoms(item)
        // console.log(data)
        this.getQuestionList()
        // 如果状态码是200表示删除成功
        if (data.status === 200) {
          return this.$message.success('删除成功')
        }
      }
    },
    // 当页码发生变化
    handleSizeChange (pagesize) {
      this.query.pagesize = pagesize
      // console.log(this.query.pagesize)
      this.getQuestionList()
    },

    // 当前页发生变化
    handleCurrentChange (page) {
      this.query.page = page
      // console.log(this.query.page)
      this.getQuestionList()
    }
  }
}
</script>

<style scoped lang='scss'>
.number {
  color: #09f;
  cursor: pointer;
  line-height: 10px;
}
</style>
